<template>
  <div>

    <!-- 标题 -->
    <div class="titles">
      <h2>学习成果认定</h2>
      <span>选修课学分：{{ user.credit }}</span>
      <span>成果累计积分：{{ user.scores }}</span>
    </div>
    <hr class="underline">

    <!-- 数据表格 -->
    <div class="boby " id="margins">

      <!-- 按钮 -->
      <div class="tables">
        <el-button class="buttons" type="primary" @click="dialogFormVisible = true">学习成果申请</el-button>


        <!-- Form 学习成果申请表单 -->
        <el-dialog title="学习成果申请" :visible.sync="dialogFormVisible" :close-on-click-modal="false"
          :close-on-press-escape="false" :before-close="handleClose">
          <el-form :model="form" :rules="rules" ref="form">
            <el-form-item label="学号：" :label-width="formLabelWidth">
              <el-input v-model="form.s_number" autocomplete="off" :readonly="true"></el-input>
            </el-form-item>
            <el-form-item label="类别：" :label-width="formLabelWidth" prop="achieve_type">
              <el-select v-model="form.achieve_type" placeholder="请选择申请类别">
                <el-option v-for="(item, index) in achTypeAll" :key="index" :label="item.type_name"
                  :value="item.type_id"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="描述：" :label-width="formLabelWidth" prop="describe">
              <el-input type="textarea" v-model="form.describe" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="上传文件：" :label-width="formLabelWidth">
              <el-upload ref="upload" action="http://localhost:8015/user/upload" :on-success="successUpload"
                :limit="1">
                <el-button size="small" type="primary">点击上传</el-button>
              </el-upload>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="cancel()">取 消</el-button>
            <el-button type="primary" v-if="restart" @click=" check()">重新申请</el-button>
            <el-button type="primary" v-else @click="check()">申 请</el-button>
          </div>
        </el-dialog>

        <!-- 数据表格 -->
        <el-table :data="tData" border>
          <el-table-column type="index" width="50" label="序号" align="center">
          </el-table-column>
          <el-table-column prop="s_number" label="学号" width="" align="center">
          </el-table-column>
          <el-table-column prop="achievement_type.type_name" label="类别" align="center">
          </el-table-column>
          <el-table-column prop="describe" label="描述" align="center" show-overflow-tooltip>
            <template slot-scope="scope">
              <el-link type="primary" v-if="scope.row.outcome == 1 || scope.row.outcome == 0"
                @click="getLink(scope.row)">{{ scope.row.describe }}</el-link>
              <span v-else>{{ scope.row.describe }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="uploadFile" label="资料" align="center">
            <template v-slot="scope">
              <el-link :href="'http://localhost:8015/user/' + scope.row.uploadFile"
                v-if="scope.row.uploadFile">点击下载</el-link>
              <span v-else style="color: #ccc;">暂无</span>
            </template>
          </el-table-column>
          <el-table-column prop="subTime" label="时间" align="center" sortable>
          </el-table-column>
          <el-table-column prop="reason" label="驳回理由" align="center" show-overflow-tooltip>
            <template slot-scope="scope">
              <span v-if="scope.row.outcome == 0">{{ scope.row.reason }}</span>
              <span v-else-if="scope.row.outcome == 1" style="color:#ccc;">暂无</span>
              <span v-else-if="scope.row.outcome == 2" style="color:#ccc;">已通过</span>
            </template>
          </el-table-column>
          <el-table-column prop="outcome" label="申请状态" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.outcome == 0" style="color: rgba(255, 0, 0, 0.539);">未通过</span>
              <span v-else-if="scope.row.outcome == 1">审批中</span>
              <span v-else-if="scope.row.outcome == 2" style="color: rgba(0, 128, 0, 0.62);">通过</span>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页封装 -->
        <Pagination :datas="tableData" @pageChange="pageChange"></Pagination>


      </div>
    </div>
  </div>
</template>

<script>
import { identified, postAchievement, modify, achievementType, achievementTypeAll } from "@/api/student/achievementAPI"
import { getInfo, uploadFile } from "@/api/user"
import Pagination from '@/components/Pagination/pagination.vue'

export default {
  name: "ApplicationStatus",
  components: {
    // 分页组件
    Pagination
  },
  data() {
    return {
      //用户信息
      user: {},
      // 源数据项
      tableData: [],
      //分页后的数据
      tData: [],

      // 学习成果申请表单
      form: {
        s_number: "",
        achieve_type: "",
        describe: "",
        uploadFile: "",
        subTime: '',
        status: 0,  // 0 认定
        outcome: "1" // 审核是否通过
      },

      // 数据 id 用于修改
      sid: '',

      // 申请表单宽度
      formLabelWidth: "120px",

      // 按钮 判断
      dialogFormVisible: false,

      // 申请和重新申请判断
      restart: false,

      //非空校验
      rules: {
        achieve_type: [
          { required: true, message: '请选择活动区域', trigger: 'change' }
        ],
        describe: [
          { required: true, message: '请填写描述信息', trigger: 'blur' }
        ]

      },
      // 成果类别表数据
      achTypeAll: []

    }
  },
  created() {
    this.info();
  },

  methods: {

    // 获取用户信息
    info() {
      // 获取个人信息
      getInfo().then(res => {
        this.user = res.data;
        this.form.s_number = this.user.username
        this.datas();
      })
    },

    // 获取成果表数据
    datas() {
      const table = {
        s_number: this.user.username,
        status: 0
      }
      identified(table).then(res => {
        this.tableData = res.data
        console.log("this.tableData", this.tableData)
        this.achType();
      })

    },
    // 获取分页后数据 
    pageChange(data) {
      this.tData = data
    },

    // 成果分类表数据
    achType() {
      achievementTypeAll().then(res => {
        this.achTypeAll = res.data
        console.log("achTypeAll", this.achTypeAll);
      })
    },

    //表单提交方法
    submit() {

      // 给 申请表单中的 日期 添加当前日期
      const currentDate = new Date();
      const year = currentDate.getFullYear();
      const month = String(currentDate.getMonth() + 1).padStart(2, '0');
      const day = String(currentDate.getDate()).padStart(2, '0');
      this.form.subTime = `${year}-${month}-${day}`;
      // 赋值
      postAchievement(this.form).then(res => {
        if (res.code == 200) {
          const messages = "添加成功"
          this.open2(messages);
          this.datas();
          this.cancel();
        } else {
          this.open3();
        }
      })
    },

    // 修改数据
    getLink(row) {
      this.restart = true  //打开重新申请
      this.dialogFormVisible = true  // 打开 将表单弹出
      this.form.achieve_type = row.achieve_type;  // 成果类别
      this.form.describe = row.describe;   // 成果详情
      this.sid = row.id // 成果 id 
      console.log("修改数据时给form赋值", this.form);
    },
    // 数据校验提交
    check() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          console.log("校验成功");
          // 判断是否携带id 
          if (this.sid) {
            console.log("进入修改");
            // 修改数据方法
            this.submitModify();
            this.sid = '' // 将 id 销毁
            this.dialogFormVisible = false  // 关闭弹出表单
            this.restart = false // 关闭重新申请

          } else {
            // 添加数据方法
            this.submit()
            this.dialogFormVisible = false  // 关闭弹出表单

          }

        } else {
          this.dialogFormVisible = true  // 关闭弹出表单
          console.log('error submit!!');
          return false;
        }

      });
    },

    // 修改数据提交
    submitModify() {
      console.log("数据修改后的form", this.form);
      const modifyData = {
        id: this.sid,
        achieve_type: this.form.achieve_type,
        describe: this.form.describe,
        uploadFile: this.form.uploadFile,
        outcome: 1
      }
      console.log(modifyData);
      modify(modifyData).then(res => {
        if (res.code == 200) {
          const messages = "修改成功"
          this.open2(messages);
          this.datas();
          this.cancel()
        } else {
          this.open3();
        }
      })
    },

    // 获取文件名
    successUpload(res) {
      console.log("res", res);
      this.form.uploadFile = res.data
    },

    // 重置输入框内容
    cancel() {
      this.$refs.form.resetFields();  // 清除校验提示和数据
      this.$refs.upload.clearFiles(); // 清除文件列表
      this.dialogFormVisible = false
      this.restart = false
      if (this.form.achieve_type) {
        this.form.achieve_type = '';
        this.form.describe = '';
      }
    },
    //  x 号按钮
    handleClose() {
      this.cancel();
      this.dialogFormVisible = false  // 打开 将表单弹出
    },

    //成功提示
    open2(messages) {
      this.$message({
        message: messages,
        type: 'success'
      });
    },
    //失败提示
    open3() {
      this.$message({
        message: '申请失败，请检查',
        type: 'success'
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.buttons {
  margin: 10px 0;
}

.text {
  float: right;
  right: 0;
}
</style>
